<template>
  <div>
    <Chart ref="charRef" style="width: 100%;height: 600px;padding-top:50px"></Chart>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import Chart from '@/components/chart/index.vue'
let charRef = ref(null)
onMounted(() => {
  charRef.value.setOption(option)
})
let option = {
  "legend": {
    "data": [
      "赤田水库取水口",
      "三道农场十五队"
    ],
    "top": 0
  },
  "tooltip": {
    "show": true,
    "trigger": "axis",
    "axisPointer": {
      "type": "cross",
      "crossStyle": {
        "color": "#999"
      }
    }
  },
  "grid": [
    {
      "left": "7%",
      "bottom": "7%",
      "top": 90,
      "height": "80%",
      "containLabel": false,
      "tooltip": {
        "show": true,
        "trigger": "axis",
        "axisPointer": {
          "type": "cross",
          "crossStyle": {
            "color": "#999"
          }
        }
      }
    },
    {
      "left": "7%",
      "bottom": "7%",
      "top": 90,
      "width": -10,
      "height": "80%",
      "containLabel": false,
      "tooltip": {
        "show": false
      }
    }
  ],
  "xAxis": [
    {
      "type": "category",
      "boundaryGap": false,
      "data": [
        "2021-08-04 12",
        "2021-09-01 12",
        "2021-10-10 12",
        "2021-11-01 12",
        "2021-12-01 12",
        "2022-01-01 12",
        "2022-01-02 12",
        "2022-01-10 12",
        "2022-02-02 12",
        "2022-02-08 12",
        "2022-03-01 12",
        "2022-03-02 12",
        "2022-04-01 12",
        "2022-04-02 12",
        "2022-04-20 12",
        "2022-05-01 12",
        "2022-05-05 12",
        "2022-06-01 12",
        "2022-06-06 12",
        "2022-06-09 12",
        "2022-07-07 12",
        "2022-08-01 12",
        "2022-09-14 12",
        "2022-10-16 12",
        "2022-11-16 12",
        "2022-12-08 12",
        "2023-01-01 12",
        "2023-02-08 12",
        "2023-03-08 12",
        "2023-04-10 12",
        "2023-05-09 12",
        "2022-01-11 12",
        "2022-01-12 12",
        "2022-01-13 12",
        "2022-02-22 12",
        "2022-03-08 12",
        "2022-03-09 12",
        "2022-03-10 12",
        "2022-04-21 12",
        "2022-04-22 12",
        "2022-04-23 12",
        "2022-04-24 12",
        "2022-05-13 12",
        "2022-05-14 12",
        "2022-05-15 12",
        "2022-07-20 12",
        "2022-07-21 12",
        "2022-08-17 12",
        "2022-09-05 12",
        "2022-09-06 12",
        "2022-12-07 12",
        "2023-01-12 12",
        "2023-02-02 12",
        "2023-03-03 12",
        "2023-04-14 12",
        "2023-05-31 12"
      ],
      "axisPointer": {
        "type": "shadow"
      },
      "gridIndex": 0
    },
    {
      "type": "category",
      "show": false,
      "data": [
        "综合污染指数"
      ],
      "axisLine": {
        "show": false
      },
      "gridIndex": 1
    }
  ],
  "yAxis": [
    {
      "type": "value",
      "name": "综合污染指数",
      "axisLine": {
        "show": true
      },
      "axisLabel": {
        "formatter": "{value} "
      },
      "max": 1,
      "min": 0
    },
    {
      "type": "value",
      "show": false,
      "axisLine": {
        "show": false
      },
      "gridIndex": 1,
      "min": 0,
      "max": 1
    }
  ],
  "series": [
    {
      "name": "合格",
      "type": "bar",
      "xAxisIndex": 1,
      "stack": "Ad",
      "barWidth": 10,
      "yAxisIndex": 1,
      "itemStyle": {
        "color": "rgb(41, 203, 144)"
      },
      "label": {
        "show": true,
        "formatter": "合格",
        "position": "right",
        "verticalAlign": "middle"
      },
      "data": [
        0.8
      ]
    },
    {
      "name": "基本合格",
      "type": "bar",
      "xAxisIndex": 1,
      "stack": "Ad",
      "barWidth": 10,
      "yAxisIndex": 1,
      "itemStyle": {
        "color": "#fabe78"
      },
      "label": {
        "show": true,
        "formatter": "基本合格",
        "position": "right",
        "verticalAlign": "middle"
      },
      "data": [
        0.19999999999999996
      ]
    },
    {
      "name": "污染",
      "type": "bar",
      "xAxisIndex": 1,
      "stack": "Ad",
      "barWidth": 10,
      "yAxisIndex": 1,
      "itemStyle": {
        "color": "#f7931e"
      },
      "label": {
        "show": true,
        "formatter": "污染",
        "position": "right",
        "verticalAlign": "middle"
      },
      "data": [
        1
      ]
    },
    {
      "name": "重污染",
      "type": "bar",
      "xAxisIndex": 1,
      "stack": "Ad",
      "barWidth": 10,
      "yAxisIndex": 1,
      "itemStyle": {
        "color": "rgb(245, 63, 63)"
      },
      "label": {
        "show": true,
        "formatter": "重污染",
        "position": "right",
        "verticalAlign": "middle"
      },
      "data": [
        997
      ]
    },
    {
      "name": "赤田水库取水口",
      "yAxisIndex": 0,
      "label": "综合污染指数",
      "type": "line",
      "smooth": true,
      "data": [
        "0.45",
        "0.41",
        "0.48",
        "0.32",
        "0.46",
        "0.4",
        "0.35",
        "0.36",
        "0.57",
        "0.35",
        "0.36",
        "0.26",
        "0.36",
        "0.4",
        "0.35",
        "0.16",
        "0.3",
        "0.32",
        "0.43",
        "0.44",
        "0.5",
        "0.44",
        "0.59",
        "0.4",
        "0.5",
        "0.36",
        "0.67",
        "0.33",
        "0.3",
        "0.39",
        "0.36"
      ],
      "areaStyle": {
        "origin": "start",
        "color": {
          "colorStops": [
            {
              "offset": 0,
              "color": "#5470c6"
            },
            {
              "offset": 1,
              "color": "rgba(255,255,255,0.3)"
            }
          ],
          "x": 0,
          "y": 0,
          "x2": 0,
          "y2": 1,
          "type": "linear",
          "global": false
        }
      }
    },
    {
      "name": "三道农场十五队",
      "yAxisIndex": 0,
      "label": "综合污染指数",
      "type": "line",
      "smooth": true,
      "data": [
        null,
        null,
        null,
        null,
        null,
        null,
        null,
        null,
        null,
        null,
        "0.4",
        null,
        "0.41",
        null,
        null,
        null,
        null,
        null,
        null,
        "0.42",
        null,
        null,
        null,
        null,
        null,
        null,
        "0.22",
        "0.22",
        "0.23",
        null,
        null,
        "0.25",
        "0.2",
        "0.28",
        "0.41",
        "0.4",
        "0.46",
        "0.32",
        "0.35",
        "0.3",
        "0.38",
        "0.39",
        "0.47",
        "0.43",
        "0.44",
        "0.35",
        "0.49",
        "0.44",
        "0.26",
        "0.38",
        "0.38",
        "0.25",
        "0.17",
        "0.18",
        "0.23",
        "0.29"
      ],
      "areaStyle": {
        "origin": "start",
        "color": {
          "colorStops": [
            {
              "offset": 0,
              "color": "#91cc75"
            },
            {
              "offset": 1,
              "color": "rgba(255,255,255,0.3)"
            }
          ],
          "x": 0,
          "y": 0,
          "x2": 0,
          "y2": 1,
          "type": "linear",
          "global": false
        }
      }
    }
  ]
}

</script>

<style lang="scss" scoped></style>